<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>XMLHttpRequest</title>
	</head>

	<body>
		<div> Aiax 是Asynchronous javaScript+XML的缩写。 XMLHttpRequest对象（XHR）右微软首先引入，其他浏览器都实现。 虽然x代表XML但是AJax通讯和数据格式无关，也就是说这种技术不一定使用XML.
		</div>
	</body>
	<script>
		/*	如果是IE6及以下，那么我们必须还需要使用ActiveX对象通过MSXML库来实现。
											在低版本IE浏览器可能会遇到三种不同版本的XHR对象，
											即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0。
											我们可以编写一个函数。*/

		//兼容低版本的方法			
		function createXHR() {
			if(typeof XMLHttpRequest != 'undefined') {
				return new XMLHttpRequest();
			} else if(typeof ActiveXObject != 'undefined') { //IE6 以下
				var versions = [
					'MSXML2.XMLHttp.6.0',
					'MSXML2.XMLHttp.3.0',
					'MSXML2.XMLHttp'
				];
				for(var i = 0; i < versions.length; i++) {
					try {
						return new ActiveXObject(version[i]);
					} catch(e) {
						//跳过
					}
				}
			} else {
				throw new Error('您的浏览器不支持XHR对象！');
			}
		}

		var xhr = new createXHR();
		alert(xhr);

		//此处直接创建，现在大部分都支持了
		var xhr = new XMLHttpRequest(); //实例化XMLHttpRequest
		//在使用XHR对象时，先必须调用open()方法，它接受三个参数：要发送的请求类型(get、post)、请求的URL和表示是否异步。
		xhr.open('get', 'demo.php', false); //对于服务器端demo.php的get请求，false同步
		//open()方法并不会真正发送请求，而只是启动一个请求以备发送。
		//通过send()方法进行发送请求，send()方法接受一个参数，作为请求主体发送的数据。
		//如果不需要则，必须填null。执行send()方法之后，请求就会发送到服务器上。
		xhr.send(null); //发送请求，get不需要填写数据，写null即可
		//发送之后可以获取返回值

		//做成点击事件
		window.addEventListener('click', function() {
			var xhr = new createXHR();
			xhr.open('get', 'demo.php?rand=' + Math.random(), false); //设置了同步
			xhr.send(null);
			if(xhr.status == 200) { //如果返回成功了
				alert(xhr.responseText); //调出服务器返回的数据
			} else {
				alert('数据返回失败！状态代码：' + xhr.status + '状态信息：' + xhr.statusText);
			}
		}, false);

		//同步调用固然简单，但使用异步调用才是我们真正常用的手段。
		//使用异步调用的时候，需要触发readystatechange事件，然后检测readyState属性即可

		window.addEventListener('click', function() {
			var xhr = new createXHR();
			xhr.onreadystatechange = function() { //触发这个事件
				if(xhr.readyState == 4) {
					if(xhr.status == 200) {
						alert(xhr.responseText);
					} else {
						alert('数据返回失败！状态代码：' + xhr.status + '状态信息：' +
							xhr.statusText);
					}
				}
			};
			xhr.open('get', 'demo.php?rand=' + Math.random(), true); //异步
			xhr.send(null);
			//xhr.abort();//取消异步请求
		}, false);

		//
		//使用getResponseHeader()获取单个响应头信息
		alert(xhr.getResponseHeader('Content-Type'));

		//使用getAllResponseHeaders()获取整个响应头信息
		alert(xhr.getAllResponseHeaders());

		//使用setRequestHeader()设置单个请求头信息
		xhr.setRequestHeader('MyHeader', 'Lee'); //放在open方法之后，send方法之前
		
		
		//PS：我们只可以获取服务器返回回来响应头信息，无法获取向服务器提交的请求头信息，
		//自然自定义的请求头，在JavaScript端是无法获取到的。
	</script>

</html>